<script setup>
import {
  getshopcart,
  delshopcart,
  clearshopcart,
  buygoodcart
} from '/src/api/shopcart.js'
import { ref } from 'vue'
import { Delete, Coin } from '@element-plus/icons-vue'
const myshopcart = ref([
  {
    id: '1',
    name: '你好',
    price: 20
  },
  {
    id: '2',
    name: '我好',
    price: 20
  }
])
const getdata = async () => {
  const res = await getshopcart()
  myshopcart.value = res.data
}
const deletegood = async (id) => {
  await ElMessageBox.confirm('你确认要删除吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  const res = await delshopcart(id)
  if (res.code == 1) {
    ElMessage.success(res.data)
  } else {
    ElMessage.error(res.data)
  }
  getdata()
}
const clearcart = async () => {
  await ElMessageBox.confirm('你确认要全部删除吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  const res = await clearshopcart()
  if (res.code == 1) {
    ElMessage.success(res.data)
  } else {
    ElMessage.error(res.data)
  }
  getdata()
}
const buy = async (id) => {
  radio.value = id
  const res = await buygoodcart(String(radio.value))
  if (res.code == 1) {
    ElMessage.success(res.data)
  } else {
    ElMessage.error(res.data)
  }
  getdata()
}
getdata()
const radio = ref([])
const handleSelectionChange = (val) => {
  // val 是一个数组，包含了所有选中的行数据
  // 在这里你可以对 selectedRows 进行操作，比如发送到服务器、显示在页面上等等
  radio.value = val.map((row) => row.id)
  console.log(radio.value)
  console.log(String(radio.value))
}
const manyadd = async () => {
  if (radio.value.length != 0) {
    const res = await buygoodcart(String(radio.value))
    if (res.code == 1) {
      ElMessage.success(res.data)
    } else {
      ElMessage.error(res.data)
    }
    getdata()
  }
}
const manydele = async () => {
  if (radio.value.length != 0) {
    await ElMessageBox.confirm('你确认要删除吗？', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
    for (let index = 0; index < radio.value.length; index++) {
      delshopcart(radio.value[index])
    }
    ElMessage.success('删除成功')
    getdata()
  }
}
</script>
<template>
  <page-header title="我的购物车">
    <template #extra>
      <el-button type="danger" @click="clearcart">全部删除</el-button>
      <el-button type="info" @click="manydele">多选删除</el-button>
      <el-button type="primary" @click="manyadd">多选购买</el-button>
    </template>
    <el-table
      :data="myshopcart"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" width="100" type="index"></el-table-column>
      <el-table-column label="商品图片" prop="image">
        <template #default="{ row }">
          <img :src="row.image" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="商品价格" prop="amount"></el-table-column>
      <el-table-column label="商品分类" prop="categoryName"></el-table-column>
      <el-table-column
        label="商品描述"
        show-overflow-tooltip
        prop="description"
      ></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button
            :icon="Coin"
            circle
            type="primary"
            title="购买"
            @click="buy(row.id)"
            size="large"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            type="danger"
            title="删除"
            @click="deletegood(row.id)"
            size="large"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" style="height: 550px" />
      </template>
    </el-table>
  </page-header>
</template>
<style lang="scss" scoped>
img {
  height: 150px;
  width: 150px;
}
.el-table {
  font-size: 20px; /* 设置你想要的字体大小 */
}
</style>
